<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <div id="app">
			  <h1>Hello App!</h1>
			  <p>
			    <!-- 使用 router-link 组件来导航. -->
			    <!-- 通过传入 `to` 属性指定链接. -->
			    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			    <router-link to="/user/foo">Go to User</router-link>
			  </p>
			  <!-- 路由出口 -->
			  <!-- 路由匹配到的组件将渲染在这里 -->
			  <router-view></router-view>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<script>
			 //有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
			 //你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
			 const router = new VueRouter({
				  routes: [
				    {
				      path: '/user/:userId',
				      name: 'user',
				      component: User
				    }
				  ]
			})
			
			//要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
			//<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
			//这跟代码调用 router.push() 是一回事：
			//router.push({ name: 'user', params: { userId: 123 }})
		</script>
	</body>
</html>
